<template>
  <el-container class="layout-container-demo">
    <NavMemu :width="width" :collapse="collapse"></NavMemu>
    <el-container>
      <el-header style="display: flex;justify-content: space-between; font-size: 12px">
        <el-icon :size="30" @click="collapse=!collapse">
          <component :is="getIcon"></component>
        </el-icon>
        <el-dropdown @command="quit">
          <span class="el-dropdown-link">
            你好:{{ userInfo.adminname }}
            <el-icon class="el-icon--right">
              <arrow-down />
            </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="a">关于</el-dropdown-item>
              <el-dropdown-item command="q">退出</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-header>
      <el-main>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item v-for="item in names" :key="item.path">{{ item.meta.name }}</el-breadcrumb-item>
        </el-breadcrumb>
        <RouterView></RouterView>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import NavMemu from '../components/NavMenu.vue';
import { ElMessage } from 'element-plus';
import { ArrowDown, Menu as IconMenu, Message, Setting, Expand, Fold } from '@element-plus/icons-vue';
export default {
  components: {
    IconMenu,
    Message,
    Setting,
    ArrowDown,
    Location,
    NavMemu,
    Expand,
    Fold
  },
  computed: {
    userInfo() {
      return this.$store.state.userInfo;
    },
    getIcon() {
      return !this.collapse ? 'Expand' : 'Fold';
    },
    width() {
      return !this.collapse ? '200px' : '64px';
    }
  },
  data() {
    return {
      names: [], //记录当前面包屑导航的所有的name
      collapse: false
    };
  },
  watch: {
    $route: {
      handler(n) {
        // console.log(n);
        this.names = n.matched; //记录匹配的路由对象（含子路由)
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    quit(str) {
      switch (str) {
        case 'a':
          ElMessage({
            message: '暂不处理',
            type: 'warning'
          });
          break;
        case 'q':
          localStorage.removeItem('token');
          this.$store.commit('setUserInfo', {});
          this.$router.push('/login');
          break;
        default:
          break;
      }
    }
  }
};
</script>
<style>
html,
body,
#app {
  height: 100%;
}

.el-container {
  height: 100%;
}
.el-header {
  background-color: #7f8fa6;
  align-items: center;
}
.el-dropdown-link {
  color: #000;
}
.el-main {
  background-color: #dfe6e9;
}
.el-breadcrumb__item {
  margin-bottom: 30px;
}
</style>